<!-- 评论组件 -->
<template>
  <v-timeline
  align-top
  dense
  >
    <v-timeline-item v-for="(item,index) in items" :key="item.id">
      <template v-slot:icon>
        <v-avatar>
          <img src="http://i.pravatar.cc/64">
        </v-avatar>
      </template>
      <!-- <template v-slot:opposite>
        <span>Tus eu perfecto</span>
      </template> -->
      <v-card class="elevation-2" shaped>
        <v-card-title>{{item.member_id}}</v-card-title>
        <v-card-subtitle>{{item.createdAt}}</v-card-subtitle>
        <v-card-text>{{item.comment}}</v-card-text>
        <v-card-actions>
          <v-tooltip bottom>
            <template v-slot:activator="{ on }">
              <v-btn v-on="on" icon @click="likeThis(index)"><v-icon small>thumb_up</v-icon>{{item.likes}}</v-btn>
            </template>
            <span>点赞</span>
          </v-tooltip>
          <v-tooltip bottom>
            <template v-slot:activator="{ on }">
                <v-btn v-on="on" icon disabled><v-icon small>comment</v-icon></v-btn>
            </template>
            <span>回复</span>
          </v-tooltip>
        </v-card-actions>
      </v-card>
    </v-timeline-item>
    <v-pagination v-if="length>0" v-model="page" :length="length"></v-pagination>
    <v-timeline-item>
      <v-card>
        <!-- <v-card-title>输入评论</v-card-title> -->
        <v-card-text>
          <!-- <v-text-field label="标题"></v-text-field> -->
          <v-textarea label="评论内容" placeholder="在这里输入您想发表到评论内容..." v-model="comment"></v-textarea>
        </v-card-text>
        <v-card-actions>
          <v-btn color="primary" @click="submit"><v-icon>send</v-icon>发表评论</v-btn>
        </v-card-actions>
      </v-card>
    </v-timeline-item>
  </v-timeline>
</template>
<script>
import * as API from '@/api/member/comment.js'
export default {
  name: 'CommentComponent',
  components: {},
  data: function () {
    return {
      items: [],
      total: 0,
      page: 1,
      pageSize: 20,
      comment: ''
    }
  },
  created: function () {
    this.fetchData()
  },
  computed: {
    length: function() {
      return Math.ceil(this.total / this.pageSize)
    }
  },
  watch: {
    page: function(newVal, oldVal) {
      this.fetchData()
    }
  },
  methods: {
    fetchData: function() {
      API.fetchList({ path: this.$route.path, page: this.page, page_size: this.pageSize }).then(res => {
        this.items = res.data.data
        this.total = res.data.total
      })
    },
    submit: function() {
      API.createOne({ path: this.$route.path, comment: this.comment }).then(res => {
        this.$toasted.success(res.data)
        this.fetchData()
      })
    },
    likeThis: function(index) {
      API.likes(this.items[index].id).then(res => {
        this.items[index].likes = this.items[index].likes + 1
      })
    }
  }
}
</script>
<style scoped>
</style>
